<template>
  <el-container class='elheight'>
    <el-aside class='appTree'>
      <app-tree :tree-data="treeData" v-on:appTreeClick="appTreeClick"></app-tree>
    </el-aside>
    <el-main>
      <el-container>
        <el-header class="dzy-main-header">
          <div class="dzy-custom-search-box">
            <div>
              部门层级：
              <el-select v-model="selectForm.level" clearable placeholder="请选择">
                <el-option v-for="(item,index) in levelOption" :key="index" :label="item.name" :value="item.code"></el-option>
              </el-select>
            </div>
            <div>
              角色类型：
              <el-select v-model="selectForm.memberType" clearable placeholder="请选择">
                <el-option v-for="(item,index) in roleTypeOption" :key="index" :label="item.name" :value="item.code"></el-option>
              </el-select>
            </div>
            <div>
              用户名：<el-input placeholder="请输入内容" v-model="selectForm.name" clearable class="dzy-custom-input"></el-input>
            </div>
            <div class="custom-search-item">
              <span class="custom-searchInpt-label">时间段：</span>
              <el-date-picker
                v-model="selectForm.beginTime"
                type="date"
                value-format="timestamp"
                format="yyyy 年 MM 月 dd 日"
                placeholder="选择日期"
                :picker-options="dataPickerBeforeTodayOptions">
              </el-date-picker>
              <span> ~ </span>
              <el-date-picker
                v-model="selectForm.endTime"
                type="date"
                value-format="timestamp"
                format="yyyy 年 MM 月 dd 日"
                placeholder="选择日期"
                :picker-options="dataPickerBeforeTodayOptions">
              </el-date-picker>
            </div>
            <div>
              <el-button @click="searchHandleClick" type="primary" icon="el-icon-search">查询</el-button>
            </div>
          </div>
        </el-header>
        <el-main>
          <app-table
            :page-data="pageData"
            :table-columns="tableColumns"
            v-on:checkFlowHandle="checkCruiseDetailEvt">
          </app-table>
          <el-dialog
            :title="dialogTitle"
            :visible.sync="dialogFormVisible"
            :before-close="cancel">
            <el-table
              :data="cruiseDetailData"
              style="width: 100%">
              <el-table-column
                type="index"
                label="编号"
                :index="indexMethod">
              </el-table-column>
              <el-table-column
                v-for="(item, index) in cruiseDetailTableColumn"
                :key="index"
                :prop="item.prop"
                :label="item.label"
                :formatter="item.formatter"
                :show-overflow-tooltip="true">
              </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="primary"
                    @click="checkCruiseTrack(scope.$index, cruiseDetailData)">预览</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-dialog>
          <el-dialog :title="dialogTitle" :visible.sync="dialogMapVisible" :before-close="mapCancel" class="custom-abbrMap-dialog">
            <div style="width: 100%; height: 450px;" v-if="dialogMapVisible">
              <abbr-map :mapInfo="mapInfo"  :isClosed="isClosed"></abbr-map>
            </div>
          </el-dialog>
        </el-main>
      </el-container>
    </el-main>
  </el-container>
</template>

<script>
import AbbrMap from '@/components/AbbrMap'
import AppTree from '@/components/common/AppTree'
import AppTable from '@/components/AppTable'
import {getUserDeptTree} from '@/utils/SessionDataUtil'
import {getDictDataOption} from '@/utils/getDictDataOption'
import {findCruisePage, findCruiseTimes, getCruiseTrack} from '@/http/WangGeGuanLiApi'
export default {
  data () {
    return {
      mapInfo: null,
      dialogFormVisible: false,
      dialogMapVisible: false,
      showOnly: false,
      isClosed: false,
      selectForm: {},
      pageData: {},
      treeData: [],
      levelOption: [],
      roleTypeOption: [],
      cruiseDetailData: [],
      currentSelectedData: [],
      dialogTitle: '',
      tableColumns: [
        { prop: 'name', label: '用户名' },
        { prop: 'memberType', label: '角色', formatter: this.memberTypeFormtter },
        { prop: 'phone', label: '联系方式' },
        { prop: 'totalCount', label: '巡格次数' },
        { prop: 'totalCruise', label: '巡格里程', formatter: this.cruiseFormtter }
      ],
      cruiseDetailTableColumn: [
        { prop: 'startTime', label: '开始时间', formatter: this.dateFormatter },
        { prop: 'time', label: '结束时间', formatter: this.dateFormatter },
        { prop: 'address', label: '结束地址' }
      ],
      dataPickerBeforeTodayOptions: {
        disabledDate (time) {
          return time.getTime() > Date.now()
        }
      }
    }
  },
  components: {
    AppTree,
    AbbrMap,
    AppTable
  },
  mounted () {
    this.getTreeData()
    this.getTableData()
    this.levelOption = getDictDataOption('层级')
  },
  methods: {
    indexMethod (index) {
      return index + 1
    },
    memberTypeFormtter (row, column) {
      let prop = column.property
      let roleName = ''
      switch (prop) {
        case '0':
          roleName = '网格长'
          break
        case '1':
          roleName = '网格员'
          break
        default:
          roleName = '管理员'
          break
      }
      return roleName
    },
    cruiseFormtter (row, column) {
      let cruise = 0
      return cruise
    },
    dateFormatter (row, column) {
      let prop = column.property
      if (row[prop] && row[prop] === '') return ''
      let resTime = JSON.parse(row[prop])
      return this.$moment(resTime).format('YYYY-MM-DD HH:mm:ss')
    },
    cancel () {
      this.dialogFormVisible = false
    },
    mapCancel () {
      this.isClosed = true
      this.dialogMapVisible = false
    },
    checkCruiseDetailEvt (data) {
      this.dialogTitle = data.data[data.index].name + '巡格情况'
      this.selectForm.userId = data.data[data.index].userId
      let m = this
      findCruiseTimes(this.selectForm).then(resp => {
        if (resp.code && resp.code === '200') {
          m.dialogFormVisible = true
          m.cruiseDetailData = resp.data.items
        }
      })
    },
    checkCruiseTrack (index, data) {
      let param = {
        userId: data[index].userId,
        dayViewCount: data[index].dayViewCount
      }
      let m = this
      getCruiseTrack(param).then(resp => {
        if (resp.code && resp.code === '200') {
          m.dialogMapVisible = true
          let data = resp.data
          let trackPath = []
          m.mapInfo = {}
          for (const key in data) {
            if (data.hasOwnProperty(key)) {
              let longitude = parseFloat(data[key].longitude)
              let latitude = parseFloat(data[key].latitude)
              trackPath.push([longitude, latitude])
            }
          }
          m.mapInfo.viewMode = '2D'
          m.mapInfo.isLoadTrack = true
          m.mapInfo.isLoadTracks = true
          m.mapInfo.trackInfo = { trackPath: trackPath }
          m.isClosed = false
        }
      })
    },
    getTreeData () {
      let data = getUserDeptTree()
      if (data && data instanceof Array) {
        this.treeData = data
      }
    },
    getTableData (param) {
      findCruisePage(param).then(resp => {
        if (resp.code && resp.code === '200') {
          this.pageData = resp.data
          this.pageData.isIntegralHandleInline = true
          this.pageData.handleLabel = '查看巡格信息'
          this.pageData.btnType = 'success'
        }
      })
    },
    appTreeClick (data) {
      this.selectForm.deptId = data.id
      this.selectForm.offset = 0
      this.getTableData(this.selectForm)
    },
    searchHandleClick () {
      this.selectForm.offset = 0
      this.getTableData(this.selectForm)
    }
  }
}
</script>
<style>
.custom-abbrMap-dialog .el-dialog{
  width: 74%;
  margin-top: 10vh !important
}
.custom-abbrMap-dialog .el-dialog__body{
  padding: 6px;
}
</style>
